Pure Library –
Brand Standards
The single source of truth for how PURE looks, sounds, and behaves — colors, type, logo, components, and voice.
Live · try it tags mark the demos you can click, hover, and play with.
- For people: read top to bottom once. The Rule callouts are the non-negotiables; everything else is guidance with worked examples.
- For future sessions / design agents: import
assets/colors_and_type.css, then follow the canonical decisions verbatim — Open Sans everywhere (UI + display), Cinzel wordmark only, navy#172e55+ gold#dccaaf, compact 5px default radius, single Down-Right shadow. - Ground truth: where the shipped product and the tokens disagree, the tokens win. Divergences are flagged inline.
- Don't invent. No new colors, fonts, or shadows. If a value isn't here, derive it from the nearest token and note it.
The entire ecosystem,
under one roof.
PURE is a single-roof real-estate technology ecosystem — 41 modules sharing one data spine, serving agents, brokers, clients, MLS and association staff, and vendors. The brand has to read as institutional and trustworthy, yet operational and modern: a premium brokerage's letterhead wrapped around a real working system.
Vision & mission
To be recognized as the essential partner in creating and implementing ideas that optimize convenience, efficiency & security.
Brand values
Every piece of work should express these — and never contradict them.
Written by people who run brokerages, for people who run brokerages.
Sophisticated enough to prove we know the domain, simple and grounded enough that a first-week agent isn't lost. Results-oriented over jargon. Serious, but not stodgy — fairly casual, modern, plain. Contractions are fine. We exist to empower others, so we communicate clearly and honestly.
Never bubbly, never salesy-startup. Name things plainly and trust the reader to know the terms of the trade — CDA, TREC, escrow, DOM, earnest money. No emoji in headings or body copy, ever.
Principles in practice
"The entire Pure ecosystem, under one roof."
"CRM — the central spoke & full CRM: contract-to-close, parties, documents, CDA link, issues, status timeline, print workflow."
"Schedule media days, meetings, tasks, calls & follow-ups for yourself or other users."
"Open CRM " "New Transaction" "Solve an issue"
Casing & mechanics
Headings & hero
Sentence case. One italic-gold emphasis phrase, max. Title Case is reserved for product & module names: Transaction Hub, Pure Calendar, CDA, Legal Forms.
Eyebrows & labels
UPPERCASE with wide letter-spacing for section labels, KPI labels, and status badges — DEAL FLOW, ACTIVE DEALS, UNDER CONTRACT.
Numbers & data
Counts stated flatly and confidently — "41 modules linked," "24 domains / 169 tables." Money & IDs render as data: $90,120, MLS#.
For the next session
Everything above resolves to CSS custom properties. Start any new PURE work by importing the token file, then follow the canonical decisions. Hand this whole document to a future session as the brief.
Import the tokens
/* fonts + all brand tokens, canonical names + legacy aliases */ <link rel="stylesheet" href="assets/colors_and_type.css">
The canonical decisions — copy/paste brief
# PURE — canonical brand rules (tokens win over shipped product) TYPE Open Sans = ALL PURE type (UI · body · display) Cinzel = "Pure" wordmark ONLY · Arial = email (Montserrat ARE kit) COLOR navy #172e55 green #117f39 gold #dccaaf text #000 / secondary #404040 / muted #8e8e8e / border #bfbfbf RADIUS 0 · 5 (default) · 8 · 16 (cards) · 360 (pills/chips) SHADOW 5px 5px 10px rgba(0,0,0,.10) // single "Down-Right" BUTTON compact 5px default; pill is one Buttons/Type. Gold = accent. ICONS 1.5px round-cap line icons, 24-grid; status keeps its color. VOICE operational, plain, second-person; no emoji; no startup hype.
Canonical token names
Use the role tokens — --color-navy, --color-text, --radius-rounded-md, --shadow-down-right, --font-display — rather than raw hex, so a re-theme stays consistent.
When a value is missing
Don't invent. Derive from the nearest token (e.g. a new tint via the same ramp) and leave a note. Status colors keep their meaning; gold stays the one cross-cutting accent.
PURE MLS Technologies · a product of Acquisto Real Estate · Brand Standards v2.0 · built on the Figma Essential Library & the live ecosystem.
Tokens, variables & mother components
Live-generated from window.PURE on every load — always in sync with the shipped library, never a hand-maintained list. Use it to check what already exists before adding something new from Figma, or to jump straight to a mother's spec.
Typography
Type is fixed by context, not preference — that's the rule that keeps every PURE surface coherent. Open Sans does the work — UI and display alike (every Figma text style is Open Sans). Cinzel is reserved for the wordmark alone; Arial is for email only. (Montserrat belongs to the separate Acquisto Real Estate brand system.)
Three faces, by context
Size ladder & named styles
Named styles (Figma text styles): every step ships in Regular 400 · SemiBold 600 · Bold 700, all Open Sans. Plus: Main Text/Foot & Desc Note 14/19 italic muted · Links underlined (Regular + SemiBold at SM/Main/MD; navy on light, Blue 3 on dark) · Email set in Arial — Main 14/19 + MD 16/22 (semibold renders 700). Family & weight never change between desktop and mobile — size and line-height do (columns in the ladder above: font-size / line-height, in px).
One type system. Open Sans is the typeface everywhere — UI, body, headings, eyebrows and labels alike. Cinzel is reserved for the “Pure” wordmark only. Arial appears only in email templates, for client-mail compatibility. No other typefaces. (Montserrat belongs to the separate Acquisto Real Estate brand system — see the ARE kit.)
Color
An institutional navy + gold palette over warm cream and white. Navy is the structural color; gold is the single signature accent. Status colors are used sparingly and meaningfully — in badges and 3px accent bars, never as large fields. Click any swatch to copy its hex.
Core Brand
Color Primitives
Brand ramps - Primitives — 500 is the anchor
Navy
Green
Gold
Gray Scale - Primitives
Secondary Palette - Primitives
Gradients - Primitives — vertical button fills (for a specific button type, documented with the Buttons update)
Color Tokens
Typography Colors
Borders & Separations — Figma Colors/Borders & Separations
Surfaces — from the live ecosystem (not Figma variables)
Feedback - Statuses & Info — Figma Colors/Statuses & Info
Lifecycle Statuses — deal/contact state colors (Figma: Active = Green 4 · Potential = Gray 550 · Closed = Purple 1 · Notes = Blue 5)
Contact Types — fixed color per relationship (chips are 360 pills)
Gold is the only accent that touches everything; status colors stay in their lanes. Use semantic role values (text, border, feedback) rather than reaching into a raw ramp when a role already exists.
Effect Styles, Spacing & Radiuses
Spacing Scale
Shadings
5px 5px 10px rgba(0,0,0,.10)
One neutral shadow, full stop. No navy-tinted multi-layer stacks in canonical work.
Tokens remap on mobile: radius Small5 · Medium8 · Large8 · Full128 (Minimal stays 5). General spacing is unchanged except SM2 1210. Icons step down one size (Tooltip 8 · Small 10 · Base 14 · Large 24 · XL 32); images likewise (Base 5648, Large 224128). Type family & weight never change.
Radius Scale
Public Website Library
Empty for now — components for the public-facing marketing website will be distributed here.
Dashboard Library
Empty for now — components for the signed-in dashboard application will be distributed here.
Design to correct
These components need to be updated & corrected in a future pass, then distributed into the libraries.
Badges & status
Pill tags, mono uppercase, solid fill from the status palette. Status lives in badges & 3px accent bars — not large color fields.
KPI tiles
Big Open Sans numeral + tiny uppercase label. 3px left accent bar encodes the group.
Accent card
16px radius · full hairline + 3px accent bar + light-tint header. Never the "left-border only" cliché.
Progress & upload
Track #D0D0D0 / fill #0655CC. The doc-type badge is the one Poppins Bold exception.